<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>粘贴板截图展示</title>
</head>
<body>
<h1>粘贴截图</h1>
<button id="pasteImageButton">粘贴图像</button>
<button id="pasteButton">点击粘贴截图</button>
<img id="previewImg" src="" alt="预览图" style="display:none;">

<script>



// 首先，我们需要一个函数来处理从剪贴板读取图像数据
async function getClipboardImage() {
  try {
    // 读取剪贴板内容
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        if (type.startsWith('image/')) { // 检查是否为图像类型
          const blob = await clipboardItem.getType(type); // 获取图像的Blob对象
          const url = URL.createObjectURL(blob); // 创建一个URL对象，用于访问Blob中的数据
          displayImage(url); // 展示图像
        }
      }
    }
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err);
  }
}

// 这个函数用于将图像展示在网页上
function displayImage(url) {
  const img = document.createElement('img');
  img.src = url;
  img.style.maxWidth = '100%'; // 确保图像不会超出屏幕宽度
  document.body.appendChild(img); // 将图像添加到页面中
}

// 给按钮添加点击事件，以便用户点击时读取剪贴板中的图像
document.getElementById('pasteImageButton').addEventListener('click', getClipboardImage);


// JavaScript 代码将放在这里
document.getElementById('pasteButton').addEventListener('click', function(event) {
    // 模拟粘贴操作
    document.execCommand('paste');
}, false);

// 监听粘贴事件
document.addEventListener('paste', function(event) {
    // 阻止默认行为以允许处理粘贴数据
    event.preventDefault();
    
    // 从事件中获取剪贴板数据
    const clipboardItems = event.clipboardData.items;

    // 遍历所有粘贴的数据项
    for (let item of clipboardItems) {
        // 检查是否为文件类型
        if (item.kind === 'file') {
            const file = item.getAsFile();
            // 检查是否为图片
            if (/^image\//.test(file.type)) {
                // 创建一个URL表示文件
                const imageUrl = URL.createObjectURL(file);
                
                // 获取页面上的img元素
                const imgElement = document.getElementById('previewImg');
                
                // 设置img的src属性以显示图像
                imgElement.src = imageUrl;
                
                // 显示图片
                imgElement.style.display = 'block';
            }
        }
    }
});
</script>
</body>
</html>